<template>
  <div class="satellite-con">
    <div class="head">
      <p class="head-title">历史森林火灾数据</p>
    </div>
    <img src="../src/assets/static/image/bg2.png" alt="" class="bg" />
    <div class="container">
      <!-- 地图 -->
      <div id="map-con"></div>
      <!-- 总体数据 -->
      <div class="overalldata">
        <!-- 模块标题 -->
        <div class="small-title">
          <div class="small-title-left">
            <div class="bar"></div>
            <p>卫星数据分析</p>
          </div>
          <div class="small-title-right">
            <img src="../src/assets/static/image/trend.png" alt="" class="icon" />
          </div>
        </div>
        <div class="overalldata-con">
          <!-- 等级 -->
          <div class="satellite-level">
            <!-- 火灾等级 -->
            <div class="hot-level">
              <img src="../src/assets/static/image/decotate2.png" alt="" />
              <div class="hot-level-value">80</div>
              <div class="hot-level-title">数据总数</div>
            </div>
            <div class="reliability-level">
              <img src="../src/assets/static/image/decotate2.png" alt="" />
              <div class="reliability-value">高</div>
              <div class="reliability-title">数据可靠性</div>
            </div>
            <div class="hot-level">
              <img src="../src/assets/static/image/decotate2.png" alt="" />
              <div class="hot-level-value">5</div>
              <div class="hot-level-title">最严重的标识</div>
            </div>
            <div class="reliability-level">
              <img src="../src/assets/static/image/decotate2.png" alt="" />
              <div class="reliability-value">高</div>
              <div class="reliability-title">最大着火面积</div>
            </div>
            <div class="hot-level">
              <img src="../src/assets/static/image/decotate2.png" alt="" />
              <div class="hot-level-value">20.3</div>
              <div class="hot-level-title">最严重的经度</div>
            </div>
            <div class="hot-level">
              <img src="../src/assets/static/image/decotate2.png" alt="" />
              <div class="hot-level-value">20.3</div>
              <div class="hot-level-title">最严重的纬度</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 数据列表 -->
      <div class="datalist">
            <!-- 模块标题 -->
            <div class="small-title">
                <div class="small-title-left">
                    <div class="bar"></div>
                    <p>卫生数据列表</p>
                </div>
                <div class="small-title-right">
                    <img src="../src/assets/static/image/trend.png" alt="" class="icon">
                </div>
            </div>
            <div class="datalist-con">
                <div class="datalist-title">
                    <div class="datalist-title-item">标识</div>
                    <div class="datalist-title-item">时间</div>
                    <div class="datalist-title-item">经度</div>
                    <div class="datalist-title-item">纬度</div>
                    <div class="datalist-title-item">面积</div>
                    <div class="datalist-title-item">程度</div>
                    <div class="datalist-title-item">可靠性</div>
                </div>
                <div class="lists">
                    <div class="list-con">
                        <div class="list-value">
                            <div class="list-value-item">1</div>
                            <div class="list-value-item">2023年10月10月 12:12</div>
                            <div class="list-value-item">20.312132</div>
                            <div class="list-value-item">20.312132</div>
                            <div class="list-value-item">200km²</div>
                            <div class="list-value-item">严重</div>
                            <div class="list-value-item">高</div>
                        </div>
                        <div class="list-value">
                            <div class="list-value-item">2</div>
                            <div class="list-value-item">2023年11月10月 12:12</div>
                            <div class="list-value-item">18.312132</div>
                            <div class="list-value-item">21.312132</div>
                            <div class="list-value-item">200km²</div>
                            <div class="list-value-item">一般</div>
                            <div class="list-value-item">中</div>
                        </div>
                        <div class="list-value">
                            <div class="list-value-item">1</div>
                            <div class="list-value-item">2023年10月10月 12:12</div>
                            <div class="list-value-item">20.312132</div>
                            <div class="list-value-item">20.312132</div>
                            <div class="list-value-item">200km²</div>
                            <div class="list-value-item">严重</div>
                            <div class="list-value-item">高</div>
                        </div>
                        <div class="list-value">
                            <div class="list-value-item">1</div>
                            <div class="list-value-item">2023年10月10月 12:12</div>
                            <div class="list-value-item">20.312132</div>
                            <div class="list-value-item">20.312132</div>
                            <div class="list-value-item">200km²</div>
                            <div class="list-value-item">严重</div>
                            <div class="list-value-item">高</div>
                        </div>
                        <div class="list-value">
                            <div class="list-value-item">1</div>
                            <div class="list-value-item">2023年10月10月 12:12</div>
                            <div class="list-value-item">20.312132</div>
                            <div class="list-value-item">20.312132</div>
                            <div class="list-value-item">200km²</div>
                            <div class="list-value-item">严重</div>
                            <div class="list-value-item">高</div>
                        </div>
                        <div class="list-value">
                            <div class="list-value-item">1</div>
                            <div class="list-value-item">2023年10月10月 12:12</div>
                            <div class="list-value-item">20.312132</div>
                            <div class="list-value-item">20.312132</div>
                            <div class="list-value-item">200km²</div>
                            <div class="list-value-item">严重</div>
                            <div class="list-value-item">高</div>
                        </div>
                        <div class="list-value">
                            <div class="list-value-item">1</div>
                            <div class="list-value-item">2023年10月10月 12:12</div>
                            <div class="list-value-item">20.312132</div>
                            <div class="list-value-item">20.312132</div>
                            <div class="list-value-item">200km²</div>
                            <div class="list-value-item">严重</div>
                            <div class="list-value-item">高</div>
                        </div>
                        <div class="list-value">
                            <div class="list-value-item">1</div>
                            <div class="list-value-item">2023年10月10月 12:12</div>
                            <div class="list-value-item">20.312132</div>
                            <div class="list-value-item">20.312132</div>
                            <div class="list-value-item">200km²</div>
                            <div class="list-value-item">严重</div>
                            <div class="list-value-item">高</div>
                        </div>
                        <div class="list-value">
                            <div class="list-value-item">7</div>
                            <div class="list-value-item">2023年11月10月 12:12</div>
                            <div class="list-value-item">18.312132</div>
                            <div class="list-value-item">21.312132</div>
                            <div class="list-value-item">200km²</div>
                            <div class="list-value-item">一般</div>
                            <div class="list-value-item">中</div>
                        </div>
                        <div class="list-value">
                            <div class="list-value-item">9</div>
                            <div class="list-value-item">2023年11月10月 12:12</div>
                            <div class="list-value-item">18.312132</div>
                            <div class="list-value-item">21.312132</div>
                            <div class="list-value-item">200km²</div>
                            <div class="list-value-item">一般</div>
                            <div class="list-value-item">中</div>
                        </div>
                        <div class="list-value">
                            <div class="list-value-item">1</div>
                            <div class="list-value-item">2023年10月10月 12:12</div>
                            <div class="list-value-item">20.312132</div>
                            <div class="list-value-item">20.312132</div>
                            <div class="list-value-item">200km²</div>
                            <div class="list-value-item">严重</div>
                            <div class="list-value-item">高</div>
                        </div>
                        <div class="list-value">
                            <div class="list-value-item">3</div>
                            <div class="list-value-item">2023年11月10月 12:12</div>
                            <div class="list-value-item">18.312132</div>
                            <div class="list-value-item">21.312132</div>
                            <div class="list-value-item">200km²</div>
                            <div class="list-value-item">一般</div>
                            <div class="list-value-item">中</div>
                        </div>
                        <div class="list-value">
                            <div class="list-value-item">1</div>
                            <div class="list-value-item">2023年10月10月 12:12</div>
                            <div class="list-value-item">20.312132</div>
                            <div class="list-value-item">20.312132</div>
                            <div class="list-value-item">200km²</div>
                            <div class="list-value-item">严重</div>
                            <div class="list-value-item">高</div>
                        </div>
                        <div class="list-value">
                            <div class="list-value-item">1</div>
                            <div class="list-value-item">2023年10月10月 12:12</div>
                            <div class="list-value-item">20.312132</div>
                            <div class="list-value-item">20.312132</div>
                            <div class="list-value-item">200km²</div>
                            <div class="list-value-item">严重</div>
                            <div class="list-value-item">高</div>
                        </div>

                        <div class="list-value">
                            <div class="list-value-item">1</div>
                            <div class="list-value-item">2023年10月10月 12:12</div>
                            <div class="list-value-item">20.312132</div>
                            <div class="list-value-item">20.312132</div>
                            <div class="list-value-item">200km²</div>
                            <div class="list-value-item">严重</div>
                            <div class="list-value-item">高</div>
                        </div>
                        <div class="list-value">
                            <div class="list-value-item">1</div>
                            <div class="list-value-item">2023年10月10月 12:12</div>
                            <div class="list-value-item">20.312132</div>
                            <div class="list-value-item">20.312132</div>
                            <div class="list-value-item">200km²</div>
                            <div class="list-value-item">严重</div>
                            <div class="list-value-item">高</div>
                        </div>
                        <div class="list-value">
                            <div class="list-value-item">1</div>
                            <div class="list-value-item">2023年10月10月 12:12</div>
                            <div class="list-value-item">20.312132</div>
                            <div class="list-value-item">20.312132</div>
                            <div class="list-value-item">200km²</div>
                            <div class="list-value-item">严重</div>
                            <div class="list-value-item">高</div>
                        </div>
                        <div class="list-value">
                            <div class="list-value-item">6</div>
                            <div class="list-value-item">2023年11月10月 12:12</div>
                            <div class="list-value-item">18.312132</div>
                            <div class="list-value-item">21.312132</div>
                            <div class="list-value-item">200km²</div>
                            <div class="list-value-item">一般</div>
                            <div class="list-value-item">中</div>
                        </div>
                        <div class="list-value">
                            <div class="list-value-item">1</div>
                            <div class="list-value-item">2023年10月10月 12:12</div>
                            <div class="list-value-item">20.312132</div>
                            <div class="list-value-item">20.312132</div>
                            <div class="list-value-item">200km²</div>
                            <div class="list-value-item">严重</div>
                            <div class="list-value-item">高</div>
                        </div>
                        <div class="list-value">
                            <div class="list-value-item">1</div>
                            <div class="list-value-item">2023年10月10月 12:12</div>
                            <div class="list-value-item">20.312132</div>
                            <div class="list-value-item">20.312132</div>
                            <div class="list-value-item">200km²</div>
                            <div class="list-value-item">严重</div>
                            <div class="list-value-item">高</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import { ref, onMounted, onUnmounted } from "vue";
onMounted(() => {
  initMap();
  // initChart();
});
//初始化函数
var initMap = function () {
  //获取地图显示控件
  var map = new qq.maps.Map(document.getElementById("map-con"), {
    //加载地图经纬度信息
    center: new qq.maps.LatLng(39.916527, 116.397128),
    zoom: 16, //设置缩放级别
    draggable: false,
    panControl: false, //设置是否可以拖拽
    scrollwheel: false,
    zoomControl: false, //设置是否可以滚动
    disableDoubleClickZoom: true, //设置是否可以双击放大
  });

  // 消防车
  var anchor = new qq.maps.Point(39.916527, 116.397128),
    size = new qq.maps.Size(30, 30),
    origin = new qq.maps.Point(0, 0),
    icon = new qq.maps.MarkerImage(
      "src/assets/static/image/fire1.png",
      size,
      origin,
      anchor
    );
  var marker = new qq.maps.Marker({
    icon: icon,
    map: map,
    position: map.getCenter(),
  });
  // 灭火器
  var anchor2 = new qq.maps.Point(10.916527, 115.397128),
    size = new qq.maps.Size(30, 30),
    origin = new qq.maps.Point(0, 0),
    icon2 = new qq.maps.MarkerImage(
      "src/assets/static/image/fire1.png",
      size,
      origin,
      anchor2
    );
  var marker = new qq.maps.Marker({
    icon: icon2,
    map: map,
    position: map.getCenter(),
  });

  // 巡护人员
  var anchor3 = new qq.maps.Point(99.916527, 114.397128),
    size = new qq.maps.Size(30, 30),
    origin = new qq.maps.Point(0, 0),
    icon3 = new qq.maps.MarkerImage(
      "src/assets/static/image/fire1.png",
      size,
      origin,
      anchor3
    );
  var marker = new qq.maps.Marker({
    icon: icon3,
    map: map,
    position: map.getCenter(),
  });

  // 瞭望塔
  var anchor4 = new qq.maps.Point(199.916527, 117.397128),
    size = new qq.maps.Size(30, 30),
    origin = new qq.maps.Point(0, 0),
    icon4 = new qq.maps.MarkerImage(
      "src/assets/static/image/fire1.png",
      size,
      origin,
      anchor4
    );
  var marker = new qq.maps.Marker({
    icon: icon4,
    map: map,
    position: map.getCenter(),
  });

  // 无人机
  var anchor5 = new qq.maps.Point(154.916527, 120.397128),
    size = new qq.maps.Size(40, 40),
    origin = new qq.maps.Point(0, 0),
    icon5 = new qq.maps.MarkerImage(
      "src/assets/static/image/fire1.png",
      size,
      origin,
      anchor5
    );
  var marker = new qq.maps.Marker({
    icon: icon5,
    map: map,
    position: map.getCenter(),
  });

  // 传感器
  var anchor6 = new qq.maps.Point(288.916527, 121.397128),
    size = new qq.maps.Size(30, 30),
    origin = new qq.maps.Point(0, 0),
    icon6 = new qq.maps.MarkerImage(
      "src/assets/static/image/fire1.png",
      size,
      origin,
      anchor6
    );
  var marker = new qq.maps.Marker({
    icon: icon6,
    map: map,
    position: map.getCenter(),
  });
};

// function initChart() {
//     var myEcharts = echarts.init(document.getElementById('map'), "purple-passion");

//     // 使用刚指定的配置项和数据显示图表。
//     myEcharts.setOption(option);
// }
</script>

<style scoped>
html,
body {
  position: relative;
  height: 100%;
}

.satellite-con {
  margin: 0 auto;
  height: 100%;
  width: 100%;
  background: url(../src/assets/static/image/bg2.png) no-repeat;
  background-size: cover;
  background-position: center;
  background-color: #1e2e49;
}

.bg {
  width: 100%;
  position: absolute;
  height: 100%;
  left: 0;
  top: 0;
  object-fit: cover;
  z-index: -1;
}

.head {
  position: fixed;
  top: 0;
  left: 0;
  background: url(../src/assets/static/image/head3.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 80.5px;
}

.head-title {
  text-align: center;
  font-size: 27.6px;
  line-height: 17.25px;
  color: rgb(95, 218, 255);
}

.plane {
  width: 575px;
  height: 460px;
}

.container {
  height: calc(100%-75px);
  margin-top: 75px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.small-title {
  height: 34.5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  font-size: 21.85px;
  background-color: rgba(36, 74, 126, 0.3);
}

.small-title-left {
  display: flex;
  align-items: center;
}

.bar {
  width: 11.5px;
  height: 34.5px;
  margin-right: 20px;
  box-shadow: 0 0 20px 10px #064574;
  background: linear-gradient(to bottom, #036eb1, #00f4f0);
}

.icon {
  width: 23px;
  height: 23px;
  margin-right: 23px;
}
/* 地图 */
#map-con {
  margin-left: 5.75px;
  /*地图(容器)显示大小*/
  width: 977.5px;
  height: 690px;
  /* margin: 100px auto; */
  position: absolute;
  top: 92px;
  left: 0;
}

/* 所有数据 */
.overalldata {
    position: absolute;
    width: 977.5px;
    height: 230px;
    box-sizing: border-box;
    top: 800px;
    left: 5.75px;
}

.overalldata-con {
    padding: 11.5px;
    height: 215px;
    border-radius: 0 0 11.5px 11.5px;
    border: 1.15px solid #036eb1;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.satellite-level {
    width: 100%;
    padding: 11.5px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.hot-level,
.reliability-level {
    position: relative;
    width: 161px;
    height: 195.5px;
    font-weight: 600;
    color: #fff;
}

.hot-level,
.reliability-level {
    position: relative;
    width: 120.75px;
    height: 184px;
    font-weight: 600;
    color: #fff;
}

.hot-level img,
.reliability-level img {
    position: absolute;
    left: 0;
    top: 0;
    width: 120.75px;
    height: 126.5px;
}

.hot-level .hot-level-title,
.reliability-level .reliability-title {
    position: absolute;
    bottom: 0;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
    width: 230px;
    /* left: 50%;
    transform: translateX(-50%); */
}

.hot-level .hot-level-value,
.reliability-level .reliability-value {
    position: absolute;
    top: 51.75px;
    left: 50%;
    color: #00b3f5;
    font-size: 27.6px;
    font-weight: 600;
    transform: translateX(-50%);
}
/* 数据列表 */
.datalist {
    position: absolute;
    width: 910.5px;
    height: 230px;
    box-sizing: border-box;
    top: 92px;
    right: 5.75px;
}

.datalist-con {
    padding: 11.5px;
    height: 920.95px;
    border-radius: 0 0 11.5px 11.5px;
    border: 1.75px solid #036eb1;
}

.datalist-title {
    justify-content: space-between;
    display: flex;
    align-items: center;
    border-bottom: 2.3px solid #00b3f5;
}

.datalist-title-item {
    width: 172.5px;
    text-align: center;
    line-height: 46px;
    height: 46px;
    color: #fff;
    font-size: 20.7px;
}

.list-value {
    display: flex;
    background-color: rgba(36, 74, 126, 0.3);
    align-items: center;
    margin-bottom: 11.5px;
}

.list-con {
    margin-top: 23px;
    width: 910.5px;
    height: 862.5px;
    overflow: auto;
    overflow-y: scroll;
}

.list-value-item {
    color: #fff;
    width: 172.5px;
    text-align: center;
    line-height: 28.75px;
    font-size: 20.7px;
}

.lists {
    overflow: hidden;
}
</style>